<template>
  <div>
    <!--弹框-->
    <div class="tipBox" v-show="showTip">
      <div class="content">
        <div class="title">
          <span></span>
          <span>自动识别</span>

          <span class="closetip" @click="closeTip">×</span>

        </div>
        <div class="bto_content">
          <div class="picLeft">
            <div class="pic">
              <div class="pic_box">
                <!--crossorigin="anonymous"-->
                <img :src="speciesData.url" alt="" id="target">
                <!--<div class="jcrop-holder" style="width: 0.5rem;height: 1rem;background-color:red;z-index: 500000;position: absolute">aaa</div>-->
              </div>
            </div>
            <div class="cut">
              <span v-if="caiqie" @click="cutPic"
                    style="display:inline-block;height: 100%;width: 100%;background-color: #134a59;">{{text}}</span>
              <span @click="makesure" v-if="queren"
                    style="display:inline-block;height: 100%;width: 100%;background-color: #1FB456;" id="queren">{{text}}</span>
            </div>
          </div>
          <!--v-if="resultsData.length!=0"-->
          <div class="contentRight" v-if="resultsData.length!=0">
            <ul id="radio">
              <li v-for="(re,ind) in resultsData">
                <input type="radio" name="xx" checked='' value="" @click="chooseRadio(re,ind)"
                       v-if="re.name=='非植物'||re.name=='非动物'" style="display: none">
                <input type="radio" name="xx" checked='' value="" @click="chooseRadio(re,ind)" v-else>
                <el-progress v-if="re.name=='非植物'||re.name=='非动物'" style="display: none"
                             :percentage='parseInt((Number(re.score)*100))'
                ></el-progress>
                <el-progress :text-inside="true" :stroke-width="18" :percentage='parseInt((Number(re.score)*100))'
                             color="#1FB456" v-else>
                </el-progress>
                <span style="margin-left: 0.05rem" v-if="re.name=='非植物'||re.name=='非动物'">未识别到主体，<i
                  style="color:red;font-style: normal;">手动框选</i>主体重新识别</span>
                <span style="margin-left: 0.05rem" v-else>{{re.name}}</span>
              </li>
            </ul>
          </div>
          <div class="contentRight" v-show="zidong">
            <span style="display: block;margin-bottom:0.5rem;margin-top: 1.2rem">自动识别中…</span>
            <img src="../../static/images/loading.gif" alt="">
          </div>
          <div class="contentRight" v-show="fontShi">
            <span style="margin-left: 0.05rem">未识别到主体，<i style="color:red;font-style: normal;">手动框选</i>主体重新识别</span>
          </div>
        </div>

      </div>
    </div>
    <!--弹框-->

    <form id="coords"
          class="coords"
          onsubmit="return false;"
          action="http://example.com/post.php" style="display: none">
      <!--v-show="aaaa"-->
      <div class="inline-labels" style="color: transparent">
        <label>X1 <input type="text" size="4" id="x1" name="x1"/></label>
        <label>Y1 <input type="text" size="4" id="y1" name="y1"/></label>
        <label>X2 <input type="text" size="4" id="x2" name="x2"/></label>
        <label>Y2 <input type="text" size="4" id="y2" name="y2"/></label>
        <label>W <input type="text" size="4" id="w" name="w"/></label>
        <label>H <input type="text" size="4" id="h" name="h"/></label>
      </div>
    </form>
  </div>
</template>
<script>
  import http from '../utils/http'
  import api from '../utils/api'
  import Jcrop from 'jcrop-0.9.12'
  import JcropCss from 'jcrop-0.9.12/css/jquery.Jcrop.min.css'
  export default {
    components: {},
    data() {
      return {
        showTip: false,
        bigPic: false,
        aaaa: false,
        text: '',//手动框选
        caiqie: true,
        queren: false,
        pic: '',
        resultsData: [],//识别结果
        jcrop_api: null,
        radio: 1,
        ceshi: false,
        wwww: '',
        hhhh: '',
        zidong: false,
        fontShi: false
      }
    },
    props: ['speciesData'],
    created(){
    },
    mounted(){
      this.getjcrop();
    },
    destroyed(){
      this.$off('nameCallBack');
    },
    methods: {
      openTip(){
        this.resultsData = []
        this.text = '手动框选'
        this.zidong = true
        this.pic = this.speciesData.url;
        var img = this.pic;

        function getBase64Image(img) {
          var canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, img.width, img.height);
          var dataURL = canvas.toDataURL("image/jpeg");
          return dataURL;
        }

        var image = new Image();
//        image.setAttribute('crossOrigin', 'anonymous');
        image.src = img;
        var vm = this;

        image.onload = function () {
//          var base64 = getBase64Image(image);
          var base64 = "";
          var originalPictureSize = document.getElementById("target");
          var width = originalPictureSize.naturalWidth;
          var height = originalPictureSize.naturalHeight;

//          窗口显示的宽高
          var viewWidth = $("#target").width();
          var viewHeight = $("#target").height();
          if ((width / height).toFixed(1) != (viewWidth / viewHeight).toFixed(1)) {
            if (width > 1200) {
              $("#target").css("width", parseInt(width / 10));
              $("#target").css("height", parseInt(height / 10));
            } else {
              $("#target").css("width", parseInt(width / 1.1));
              $("#target").css("height", parseInt(height / 1.1));
            }
          }
          //imageBase64: base64,
          if (vm.speciesData.type != 'plant') {
            (async function () {
              let res = await http.post(api.animalRecog, {
                x: '0',
                y: '0',
                width: width,
                height: height,
                imageUrl: img
              });
              if (res.data.status == "success") {
                vm.resultsData = res.data.result
                vm.zidong = false
                vm.fontShi = false
                vm.zidong = false
              } else {
                vm.zidong = false
                vm.fontShi = true
                vm.resultsData = []
                vm.warn("未识别到主体 请手动框选")
              }
            })();
          } else {
            (async function () {
              let res = await http.post(api.plantRecog, {
                x: '0',
                y: '0',
                width: width,
                height: height,
                imageUrl: img
              });
              if (res.data.status == "success") {
                vm.resultsData = res.data.result
                vm.zidong = false
                vm.fontShi = false
              } else {
                vm.zidong = false
                vm.fontShi = true
                vm.resultsData = []
                vm.show_pop = true
                vm.warn("未识别到主体 请手动框选")
              }
            })();
          }
        }
      },
      showtip(){
        this.showTip = true;
      },
      getjcrop(){
        var vm = this;
        jQuery(function ($) {
          $('#target').Jcrop({
            onChange: showCoords,
            onSelect: showCoords,
            onRelease: clearCoords,
          }, function () {
            vm.jcrop_api = this;
          });
        });
        function showCoords(c) {
          $('#x1').val(c.x);
          $('#y1').val(c.y);
          $('#x2').val(c.x2);
          $('#y2').val(c.y2);
          $('#w').val(c.w);
          $('#h').val(c.h);
        };
        function clearCoords() {
          $('#coords input').val('');
        };
      },
      cutPic(){
        this.caiqie = false;
        this.queren = true;
        this.text = '确认'
        var vm = this;
        jQuery(function ($) {

          $('#target').Jcrop({
            onChange: showCoords,
            onSelect: showCoords,
            onRelease: clearCoords,
//            minSize: [200, 200],//选框最小尺寸
          }, function () {
            vm.jcrop_api = this;
          });
        });
        function showCoords(c) {
          $('#x1').val(c.x);
          $('#y1').val(c.y);
          $('#x2').val(c.x2);
          $('#y2').val(c.y2);
          $('#w').val(c.w);
          $('#h').val(c.h);
        };

        function clearCoords() {
          $('#coords input').val('');
        };
        vm.zidong = false
        vm.fontShi = false

      },
      makesure(){
        $('.pic_box .jcrop-holder').css('display', 'block')
        this.resultsData = [];
        this.pic = this.speciesData.url;
        var img = this.pic;
        this.caiqie = true;
        this.queren = false;
        this.zidong = true
        this.text = '重新框选';
        function getBase64Image(img) {
          var canvas = document.createElement("canvas");
          canvas.width = img.width;
          canvas.height = img.height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, img.width, img.height);
          var dataURL = canvas.toDataURL("image/jpeg");
          return dataURL;
        }

        var image = new Image();
        image.src = img;
        var vm = this;
        image.onload = function () {
//          var base64 = getBase64Image(image);
          var originalPictureSize = document.getElementById("target");
          var width = originalPictureSize.naturalWidth;
          var height = originalPictureSize.naturalHeight;
          var viewWidth = $("#target").width();
          var viewHeight = $("#target").height();

          if (parseInt(width / height) != parseInt(viewWidth / viewHeight)) {
            $("#target").css("width", parseInt(width / (width / height)));
            $("#target").css("height", parseInt(height / (width / height)));
          }

          var width1;
          var height1;
          var x;
          var y;
          if (width > 1000 || height > 1000) {
            x = parseInt(width / viewWidth * (($("#x1").val())));
            y = parseInt(height / viewHeight * (($("#y1").val())));
            width1 = parseInt(width / viewWidth * (( $("#x2").val()))) - x;
            height1 = parseInt(height / viewHeight * (($("#y2").val()))) - y;
          } else {
            x = $("#x1").val();
            y = $("#y1").val();
            width1 = parseInt($("#x2").val()) - x;
            height1 = parseInt($("#y2").val()) - y;
          }


          if (vm.speciesData.type != 'plant') {
            (async function () {
              let res = await http.post(api.animalRecog, {
                x: x,
                y: y,
                width: width1,
                height: height1,
                imageUrl: img
              });
              vm.resultsData = res.data.result
              vm.zidong = false
              vm.fontShi = false
              vm.jcrop_api.destroy();
            })();
          } else {
            (async function () {
              let res = await http.post(api.plantRecog, {
                x: x,
                y: y,
                width: width1,
                height: height1,
                imageUrl: img
              });

              vm.resultsData = res.data.result
              vm.zidong = false
              vm.fontShi = false
              vm.jcrop_api.destroy();
            })();
          }


        }
      },
      chooseRadio(re, ind){
        this.$emit('nameCallBack', re.name);
        this.closeTip()
      },
      adaptive(){
        var vm = this;
        var documentHeight = document.body.clientHeight;
        $("#bigbox").height(documentHeight * 0.58);
        $("#big").height(documentHeight * 0.58);
        if (documentHeight < 650) {
          vm.subhead = false
        }
        if (documentHeight > 650) {
          vm.subhead = true;
        }
        window.addEventListener("resize", function () {
          var documentHeight = document.body.clientHeight;
          $("#bigbox").height(documentHeight * 0.58);
          $("#big").height(documentHeight * 0.58);
          if (documentHeight < 650) {
            vm.subhead = false
          }
          if (documentHeight > 650) {
            vm.subhead = true;
          }
        });

      },
      jcropDestroy(){
        this.jcrop_api.destroy();
      },
      closeTip(){
        this.showTip = false;
        this.jcrop_api.destroy();
      },
      warn(text) {
        this.$message({
          message: text,
          type: 'warning'
        });
      },
    }
  }

</script>
<style scoped>

  /*弹框*/
  .tipBox {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
  }

  .content {
    width: 50%;
    height: 60%;
    background-color: #fff;
    position: absolute;
    top: 22%;
    left: 24%;
    padding: 0.1rem;
    display: flex;
    flex-direction: column;
    border: 0.01rem solid #ccc;
  }

  .content .bto_content .picLeft {
    width: 60%;
    padding: 0.1rem;
    border: 0.01rem solid #ccc;
  }

  .pic > img {
    /*max-height: 100%;*/
    overflow: hidden;
    display: none;
  }

  .pic {
    /*width: 5.5rem;*/
    /*height:  4.3rem;*/
    /*display: table-cell;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*width:5.5rem;*/
    /*height: 4.3rem;*/
    /*position: relative;*/
    /*overflow: hidden*/
  }

  .pic_box {
    width: 5.4rem;
    height: 4.3rem;
    /*display: table-cell;*/
    display: flex;
    justify-content: center;
  }

  .content .bto_content .picLeft img {
    /*max-width: 100%;*/
    max-height: 100%;
    overflow: hidden;
  }

  .bto_content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
  }

  .cut {
    width: 56.5%;
    height: 0.5rem;
    position: absolute;
    bottom: 0.2rem;
    left: 0.2rem;
    cursor: pointer;
    z-index: 2000;
    text-align: center;

  }

  .cut i {
    color: #fff;
    font-size: 0.18rem;
  }

  .cut span {
    color: #fff;
    font-size: 0.2rem;
    line-height: 0.5rem;
  }

  .content .bto_content .contentRight {
    width: 40%;
    text-align: center;
    padding: 0.1rem;
  }

  .bto_content .contentRight ul {
    width: 100%;
    max-height: 95%;
    overflow: auto;
  }

  .bto_content .contentRight ul li {
    width: 100%;
    text-align: left;
    height: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .el-progress {
    width: 70%;
  }

  .closetip {
    position: absolute;
    top: -0.1rem;
    right: 0.1rem;
    font-size: 0.4rem;
    cursor: pointer;
  }

  .title {
    width: 100%;
    height: 0.5rem;
  }

  .title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.01rem;
  }

  .title span:nth-child(1) {
    display: inline-block;
    width: 0.05rem;
    height: 0.2rem;
    background-color: #1FB456;
    margin-right: 0.1rem;
  }

  .title span:nth-child(2) {
    font-size: 0.2rem;
    font-weight: 700;
  }

</style>
<style>
  .el-progress-bar .el-progress-bar__outer {
    height: 6px;
    border-radius: 100px;
    background-color: #ccc !important;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
  }


</style>
